<template>
  <div class="var-container">
      <!-- 轮播图区域 -->
      <swiper></swiper>
      <b-container class="bv-example-row">
        <!-- 为你推荐区域 -->
        <div class="variety-container">
            <!-- 为你推荐导航区域 -->
            <div class="divier-text">
                <b-nav align="center">
                    <b-nav-item>为你推荐</b-nav-item>
                </b-nav>
            </div>
            <!-- 为你推荐内容区域 -->
            <b-row>
                <b-col cols="6" sm="6" md="3" lg="3" v-for="item in forYouList" :key="item.vId">
                  <div class="var-card">
                    <div class="var-img">
                      <a href="#">
                        <img :src="item.vImg" alt="">
                      </a>
                    </div>
                    <div class="var-info">
                      <h5 class="var-name"><a href="#">{{ item.vName }}</a></h5>
                      <p class="var-intro">{{ item.vIntro }}</p>
                    </div>
                  </div>
                </b-col>
            </b-row>
            <div class="page">
              <Page :current="allPages.pageNum" :total="allPages.total" simple @on-change="changePageForyou" />
            </div>
        </div>
        <!-- 热门栏目区域 -->
        <div class="variety-container">
            <!-- 热门栏目导航区域 -->
            <div class="divier-text">
                <b-nav align="center">
                    <b-nav-item>热门栏目</b-nav-item>
                </b-nav>
            </div>
            <!-- 热门栏目内容区域 -->
            <b-row>
                <b-col cols="6" sm="6" md="3" lg="3" v-for="item in countList" :key="item.vId">
                  <div class="var-card">
                    <div class="var-img">
                      <a href="#">
                        <img :src="item.vImg" alt="">
                      </a>
                    </div>
                    <div class="var-info">
                      <h5 class="var-name"><a href="#">{{ item.vName }}</a></h5>
                      <p class="var-intro">{{ item.vIntro }}</p>
                    </div>
                  </div>
                </b-col>
            </b-row>
            <div class="page">
              <Page :current="allPagesNext.pageNum" :total="allPagesNext.total" simple @on-change="changePageCount" />
            </div>
        </div>
        <!-- 综艺节目单区域 -->
        <div class="variety-container">
            <!-- 综艺节目单导航区域 -->
            <div class="divier-text">
                <b-nav align="center">
                    <b-nav-item>综艺节目单</b-nav-item>
                </b-nav>
            </div>
            <!-- 综艺节目单内容区域 -->
            <b-row>
                <b-col cols="6" sm="6" md="3" lg="3" v-for="item in allVarietyList" :key="item.vId">
                  <div class="var-card">
                    <div class="var-img">
                      <a href="#">
                        <img :src="item.vImg" alt="">
                      </a>
                    </div>
                    <div class="var-info">
                      <h5 class="var-name"><a href="#">{{ item.vName }}</a></h5>
                      <p class="var-intro">{{ item.vIntro }}</p>
                    </div>
                  </div>
                </b-col>
            </b-row>
            <div class="page-all">
              <Page :total="allPagesLast.total" :current="allPagesLast.pageNum" :page-size="pageSize" @on-change="changePage"  />
            </div>
        </div>
        <!-- 分割线 -->
        <Divider orientation="center" style="color:#777;">更多精彩敬请期待</Divider>
      </b-container>
  </div>
</template>

<script>
import swiper from '../subcomponents/swiper.vue'

export default {
  data(){
    return{
      forYouList:[], // 存放为你推荐数据
      countList:[], // 存放热门栏目数据
      allVarietyList:[], // 存放综艺节目单数据
      pageSize:4, //每页显示多少条
      allPages:[], // 存放分页1的信息
      allPagesNext:[], // 存放分页2的信息
      allPagesLast:[], // 存放分页3的信息
      pageindex:1, // 默认展示第一页数据
    }
  },
  created() {
    this.getForYouList();
    this.getCountList();
    this.getAllVarietyList();
  },
  methods:{
    // 为你推荐
    getForYouList(){
      this.$http.get("variety/findYear?pageNo=" + this.pageindex + "&pageSize=" + this.pageSize).then(result => {
        this.forYouList =  result.body.list;
        this.allPages = result.body;
      })
    },
    changePageForyou(index){
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageindex = index;
      this.getForYouList();
    },
    // 热门栏目
    getCountList(){
      this.$http.get("variety/findOrderByCount?pageNo=" + this.pageindex + "&pageSize=" + this.pageSize).then(result => {
        this.countList =  result.body.list;
        this.allPagesNext = result.body;
      })
    },
    changePageCount(index){
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageindex = index;
      this.getCountList();
    },
    // 综艺节目单
    getAllVarietyList(){
      this.$http.get("variety/findAll?pageNo=" + this.pageindex + "&pageSize=" + this.pageSize).then(result => {
        this.allVarietyList =  result.body.list;
        this.allPagesLast = result.body;
      })
    },
    changePage(index){
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageindex = index;
      this.getAllVarietyList();
    }
  },
  components:{
    swiper
  }
}
</script>

<style lang="scss" scoped>
.var-container{
  a{
    color:#555;
  }
  .variety-container{
    .divier-text{
      padding: 0.5rem 0;
      font-size: 1.4rem;
      color:#ff5c38;
    }
    .var-card{
    margin-bottom: 1rem;
    .var-img{
      overflow: hidden;
      padding: 4px;
      border:1px solid #e2e2e2;
      img{
        transition: all 0.4s ease;
        width: 100%;
        height: auto;
      }
    }
    .var-info{
      padding: 6px 3px;
      .var-name{
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .var-intro{
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    }
    .var-card:hover{
      .var-img{
        box-shadow: 0 0 5px #b8b6b6;
        img{
          transform: scale(1.1);
        }
      }
      .var-name a{
        color:#ff603c;
      }
    }
    .page{
      display: flex;
      justify-content: flex-end;
      margin-bottom: 1rem;
    }
    .page-all{
      display: flex;
      justify-content: center;
      margin-bottom: 1.5rem;
    }
  }
}
</style>